import WEBGL from '@/utils/webgl'
import * as THREE from 'three'

function waves() {
  if (WEBGL.isWebGLAvailable() === false) {
    document.body.appendChild(WEBGL.getWebGLErrorMessage())
  }
  var SEPARATION = 100
  var AMOUNTX = 50
  var AMOUNTY = 50
  var container
  var waves
  var camera, scene, renderer
  var particles
  var count = 0
  var mouseX = 0
  // var mouseY = 0
  var windowHalfX = window.innerWidth / 2
  // var windowHalfY = window.innerHeight / 2
  init()
  animate()
  function init() {
    waves = document.createElement('div')
    waves.setAttribute('id', 'waves')
    waves.setAttribute(
      'style',
      'position:absolute;width:100%;top:0;bottom:0;overflow:hidden;'
    )
    container = document.createElement('div')
    container.setAttribute('style', 'position:absolute;top:37vh;')
    waves.appendChild(container)
    document.body.appendChild(waves)
    camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      1,
      10000
    )
    camera.position.y = 500
    camera.position.z = 1000
    scene = new THREE.Scene()
    var numParticles = AMOUNTX * AMOUNTY
    var positions = new Float32Array(numParticles * 3)
    var scales = new Float32Array(numParticles)
    var i = 0
    var j = 0
    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2 // x
        positions[i + 1] = 0 // y
        positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2 // z
        scales[j] = 1
        i += 3
        j++
      }
    }
    var geometry = new THREE.BufferGeometry()
    geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3))
    geometry.addAttribute('scale', new THREE.BufferAttribute(scales, 1))
    var material = new THREE.ShaderMaterial({
      uniforms: {
        color: { value: new THREE.Color(0xffffff) }
      },
      vertexShader: document.getElementById('vertexshader').textContent,
      fragmentShader: document.getElementById('fragmentshader').textContent
    })
    particles = new THREE.Points(geometry, material)
    scene.add(particles)
    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)
    renderer.setClearAlpha(0.8)
    container.appendChild(renderer.domElement)
    document.addEventListener('mousemove', onDocumentMouseMove, false)
    document.addEventListener('touchstart', onDocumentTouchStart, false)
    document.addEventListener('touchmove', onDocumentTouchMove, false)
    window.addEventListener('resize', onWindowResize, false)
  }
  function onWindowResize() {
    windowHalfX = window.innerWidth / 2
    // windowHalfY = window.innerHeight / 2
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  function onDocumentMouseMove(event) {
    mouseX = event.clientX - windowHalfX
    // mouseY = event.clientY - windowHalfY
  }
  function onDocumentTouchStart(event) {
    if (event.touches.length === 1) {
      event.preventDefault()
      mouseX = event.touches[0].pageX - windowHalfX
      // mouseY = event.touches[ 0 ].pageY - windowHalfY
    }
  }
  function onDocumentTouchMove(event) {
    if (event.touches.length === 1) {
      event.preventDefault()
      mouseX = event.touches[0].pageX - windowHalfX
      // mouseY = event.touches[ 0 ].pageY - windowHalfY
    }
  }
  function animate() {
    requestAnimationFrame(animate)
    render()
  }
  function render() {
    camera.position.x += (mouseX - camera.position.x) * 0.05
    // camera.position.y += (-mouseY - camera.position.y) * 0.05
    camera.lookAt(scene.position)
    var positions = particles.geometry.attributes.position.array
    var scales = particles.geometry.attributes.scale.array
    var i = 0
    var j = 0
    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        positions[i + 1] =
          Math.sin((ix + count) * 0.3) * 50 + Math.sin((iy + count) * 0.5) * 50
        scales[j] =
          (Math.sin((ix + count) * 0.3) + 1) * 8 +
          (Math.sin((iy + count) * 0.5) + 1) * 8
        i += 3
        j++
      }
    }
    particles.geometry.attributes.position.needsUpdate = true
    particles.geometry.attributes.scale.needsUpdate = true
    renderer.render(scene, camera)
    renderer.setClearColor(0xeeeeee, 0) // 改变背景色
    count += 0.1
  }
}

export { waves }
